<template>
	<page-loading :show="totalMoney" mode="if">
	<view class="wrap">
		<view class="total">
			<view class="mt-10 pad-t-b-15 flex flex-jc-sa flex-ai-c u-text-center">
				<view>
					<view class="textTitle color-41CB05">{{ totalMoney.infrastructure_Payoff || 0 }}</view>
					<view class="font-24 color-666">已回本（元）</view>
				</view>
				<view>
					<view class="textTitle">{{ totalMoney.payoffRate || 0 }}</view>
					<view class="font-24 color-666">回本率</view>
				</view>
				<view>
					<view class="textTitle">{{ totalMoney.infrastructure_Cost || 0 }}</view>
					<view class="font-24 color-666">总需回本（元）</view>
				</view>
			</view>
		</view>
		<view class="main">
			<u-tabs-swiper
				ref="tabs"
				name="cate_name"
				count="cate_id"
				:list="statusList"
				:current="current"
				active-color="#FFE23E"
				:is-scroll="false"
				inactive-color="#999"
				@change="changeStatus"
			></u-tabs-swiper>
			<view class="scrollwidth">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="$u.throttle(scrolltolower, 1000)">
					<view class="liststyle" v-for="(it, index) in stationList" :key="index" @click="goDetail(it.stationId)">
						<view class="pad-t-b-10 pad-b-25 flex border-bottom-1">
							<view class="width-50">
								<view class="font-32 font-bold">{{ it.station_Name }}</view>
							</view>
							<view class="width-50 u-text-right">
								<view class="font-24 color-F30000">{{ returnStatus(it.payoffStatus) }}</view>
							</view>
						</view>
						<view class="pad-t-b-15 flex flex-jc-sa flex-ai-c u-text-center">
							<view>
								<view class="textTitle color-41CB05">{{ it.infrastructure_Payoff || 0 }}</view>
								<view class="font-24 color-666">已回本（元）</view>
							</view>
							<view>
								<view class="textTitle">{{ it.payoffRate || 0 }}</view>
								<view class="font-24 color-666">回本率</view>
							</view>
							<view>
								<view class="textTitle">{{ it.infrastructure_Cost || 0 }}</view>
								<view class="font-24 color-666">总需回本（元）</view>
							</view>
						</view>
					</view>
					<u-loadmore v-if="stationList.length > 0" :status="loadStatus[loadStatusId]" bgColor="#fff"></u-loadmore>
					<view class="u-text-center mt-40 pad-t-b-40" v-else>
						<image class="toastImg" src="../../static/img/images/tu.png" mode=""></image>
						<view class="color-999">暂无基建数据</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
	</page-loading>
</template>

<script>
export default {
	data() {
		return {
			totalMoney: {},
			statusList: [
				{ cate_id: 0, cate_name: '全部' },
				{ cate_id: 5, cate_name: '审核中' },
				{ cate_id: 50, cate_name: '回本中' },
				// { cate_id: 100, cate_name: '未录入' },
				{ cate_id: 55, cate_name: '完成' }
			],
			current: 0,
			statusId: 0,
			contraction: true,
			pageIndex: 1,
			pageSize: 10,
			stationList: [],
			loadStatus: ['loadmore', 'loading', 'nomore'],
			loadStatusId: 0
		};
	},
	mounted() {
		this.GetMyStationInfrastructureTotalPayoff();
		this.GetMyStationInfrastructurePayoff();
	},
	methods: {
		// 获取我的基建洗车站点回本情况列表
		async GetMyStationInfrastructurePayoff() {
			this.loadStatusId = 1;
			try {
				let data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					infrastructureStatus: this.statusId
				};
				const res = await this.$api.washCar.GetMyStationInfrastructurePayoff(data);
				this.stationList = this.stationList.concat(res.data.list);
				this.totalpage = res.data.total;
				if (this.totalpage < 10 || this.totalpage / 10 > this.pageIndex) {
					this.loadStatusId = 2;
				}
				// console.log(res);
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 获取我的基建总回本
		async GetMyStationInfrastructureTotalPayoff() {
			// this.loadStatus = 'loading'
			try {
				const res = await this.$api.washCar.GetMyStationInfrastructureTotalPayoff();
				console.log(res);
				this.totalMoney = res.data;
			} catch (e) {
				//TODO handle the exception
			}
		},
		changeStatus(e) {
			console.log(e);
			this.current = e;
			this.statusId = this.statusList[e].cate_id;
			this.stationList = [];
			this.GetMyStationInfrastructurePayoff();
		},
		goDetail(id) {
			uni.navigateTo({
				url: './InfrastructureDetail?id=' + id
			});
		},
		returnStatus(id) {
			let name = '';
			this.statusList.forEach(it => {
				if (id !== 0) {
					if (it.cate_id === id) {
						name = it.cate_name;
					}
				}
			});
			return name;
		},
		scrolltolower() {
			// console.log('触底了');
			if (this.totalpage / 10 > this.pageIndex) {
				this.pageIndex++;
				this.GetMyStationInfrastructurePayoff();
			} else {
				this.loadStatusId = 2;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	height: 100vh;
	background: #f5f5f5;
}
.total,
.main {
	padding: 20rpx;
	background-color: #fff;
	border-radius: 0rpx 0rpx 20rpx 20rpx;
}
.main {
	margin-top: 20rpx;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
}
.liststyle {
	width: 96%;
	margin: 20rpx auto;
	padding: 20rpx;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(31, 31, 31, 0.1);
	border-radius: 10px;
}
.color-F30000 {
	color: #f30000;
}
.textTitle {
	font-size: 40rpx;
	color: #333;
	padding: 10rpx 0rpx;
	font-weight: bold;
}
.contraction {
	width: 100rpx;
	height: 51rpx;
	line-height: 51rpx;
	background: #f4f4f4;
	border-radius: 20rpx;
	margin: auto;
	text-align: center;
}
.color-41CB05 {
	color: #41cb05;
}
.scrollwidth {
	width: 100%;
	height: 90vh;
}
.toastImg {
	width: 263rpx;
	height: 277rpx;
}
.mt-40 {
	margin-top: 80rpx;
}
</style>
